
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2016-11-25 11:26:17
 * @商品放大镜效果及前进后退按钮切换
 */
    $(function(){
        var i=0;

        // 动态改变大图的src属性
        $(".smallImage img").mouseenter(function(){
            $(".bigImage img").animate({opacity:0},300);
            $(this).addClass("current").siblings().removeClass("current");
            $(".bigImage img").attr('src','img/page'+ $(this).index()+'.jpg').animate({
            opacity:1
            },300);
            $(".bigZoom img").attr('src','img/page'+ $(this).index()+'.jpg');
        });

        // 前进后退按钮的切换
        $(".smallImage img").eq(0).addClass("current");
        $(".propreview span").eq(0).click(function(){
            $(".bigImage img").animate({opacity:0},300);
            i--;
            if(i==-1){
                i=3
                $(".bigImage img").attr('src','img/page'+ i+'.jpg').animate({
                    opacity:1
                },300);
                $(".bigZoom img").attr('src','img/page'+ i+'.jpg');
                $(".smallImage img").eq(i).addClass("current").siblings().removeClass("current");
            }else{
               $(".bigImage img").attr('src','img/page'+ i+'.jpg').animate({
                    opacity:1
                },300);
                $(".bigZoom img").attr('src','img/page'+ i+'.jpg');
               $(".smallImage img").eq(i).addClass("current").siblings().removeClass("current");  
            }
        });
        $(".propreview span").eq(1).click(function(){
            $(".bigImage img").animate({opacity:0},300);
            i++;
            if(i==4){
                i=0
                $(".bigImage img").attr('src','img/page'+ i+'.jpg').animate({
                    opacity:1
                }, 300);
                $(".bigZoom img").attr('src','img/page'+ i+'.jpg');
                $(".smallImage img").eq(i).addClass("current").siblings().removeClass("current");
            }else{
               $(".bigImage img").attr('src','img/page'+ i+'.jpg').animate({
                    opacity:1
                },300);
                $(".bigZoom img").attr('src','img/page'+ i+'.jpg');
               $(".smallImage img").eq(i).addClass("current").siblings().removeClass("current");
            }
        });

        // 商品点击放大效果
        $(".bigZoom").hide();
        $(".bigImage .colorLump").hide();
        $(".bigImage").mouseover(function(e){
            $(".bigZoom").show();
            $(".bigImage .colorLump").show();
            // 镜片高度和宽度
            var bWidth=$(".bigImage .colorLump").width();
            var bHeight=$(".bigImage .colorLump").height();
            var left = e.pageX - $(this).offset().left - bWidth/2;
            var top = e.pageY - $(this).offset().top - bHeight/2;

            // 镜片随鼠标移动
            left = left < 0 ? 0 : left;
            left = left > ($(this).width()-bWidth) ? ($(this).width()-bWidth) : left;
            top = top < 0 ? 0 : top ;
            top = top > ($(this).height()-bHeight) ? ($(this).height()-bHeight) : top;
            $(".bigImage .colorLump").css({left:left, top:top});

            // 左侧图片的移动
            var imgLeft = -left * 2;
            var imgTop = -top * 2;
            imgLeft = imgLeft < -($("#bigImg").width()-$(".bigZoom").width())? -($("#bigImg").width()-$(".bigZoom").width()):imgLeft;
            imgTop = imgTop < -($("#bigImg").width()-$(".bigZoom").height()) ? -($("#bigImg").width()-$(".bigZoom").height()):imgTop;
            $("#bigImg").css({left:imgLeft, top:imgTop});
        })
        $(".bigImage").mouseleave(function(){
            $(".bigZoom").hide();
            $(".bigImage .colorLump").hide(); 
        })

        //返回顶部
        $(".sidebarIcon .bottom .li2").on("click", function(){
        $("body").animate({
            scrollTop: 0
        },200)
        })

/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2016-11-25 11:26:17
 * @tab切换的点击图片效果
 */$(function(){
        $(".tabIndicators li").eq(0).find("a").addClass("change");
        $(".tabIndicators li").mouseenter(function(){
            $(".tabContent div").animate({opacity:0},200);
            var index=$(this).index();
            var x = (-60*index)+"px";
            var y = (-60)+"px";
            $(this).find(".icoSeverGo"+index).css({"backgroundPositionX":"x"});
            $(this).find(".icoSeverGo"+index).css({"backgroundPositionY":"-60px"});
            $(this).siblings().find("span").css({"background-positionY":"0px"});
            $(this).find("a").addClass("change");
            $(this).siblings().find("a").removeClass("change");
            $(".tabContent div").eq(0).css({'display':'block'});
            $(".tabContent div").eq(index).css({"display":"block"}).animate({opacity:1},200).siblings().css({"display":"none"});
        })
    })
    /**
 * 
 * @authors Your Name (you@example.org)
 * @date    2016-11-25 11:26:17
 * @tab切换的点击移动效果
 */
   
        $(window).scroll(function(){
            var size=$(".tabs li").size();
            var T=$(".pullRight").offset().top;
            if($(window).scrollTop()>=T){
                $(".pullRight .tabs").css({position:"fixed"});
            }else{
                $(".pullRight .tabs").css({position:"static"});
            }
            for (var j=0;j<size-1;j++){
                var t=$(".pullRight>div").eq(j).offset().top;
                if ($(window).scrollTop()>=t){
                    $(".Tabs li").eq(j).addClass("active").siblings().removeClass("active");
                }
            }
        })

        $(".Tabs li").click(function(){
            var index=$(this).index();
            var range=$(".pullRight>div").eq(index).offset().top;
            $("html,body").animate({scrollTop:range},100);
        })


    // 点击换一批效果
        var changeBtn=$(".changeBtn");
        var page=0;
        function showData(data){
            for(var i=0 ;i<data.length; i++){
                $('.panel').find("img").eq(i).attr({src:"img/"+data[i].pic});
                $('.panel').find(".title a").eq(i).text(data[i].title);
                $('.panel').find(".priceNum").eq(i).text(data[i].price);        
            }
        }
        function postData(page){
            $.ajax({
                type:"get",
                url:"page.php?page="+page,
                data:"",
                dataType:"json",
                success:function(data){
                    showData(data);
                }
            });
        }
          changeBtn.click(function(){
          postData(page);
          page++
          if(page>=2){
            page = 0
          }
        });
})

